<template>
  <div>
    <my-container :title="$route.query.id?'编辑角色':'添加角色'">
      <div style="height: 150px;" class="stepBox">
        <el-steps direction="vertical" :active="activeNum">
          <el-step v-for="item in stepTile" :key="item" :title="item" />
        </el-steps>
      </div>
      <div class="container">
        <info-wrapper v-show="activeNum===0" title="角色信息">
          <el-form ref="form" label-width="80px" :model="formData" :rules="rules">
            <el-form-item label="角色名称" prop="roleName">
              <el-input v-model="formData.roleName" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="角色描述:">
              <el-input v-model="formData.remark" type="textarea" />
            </el-form-item>
          </el-form>
        </info-wrapper>
        <info-wrapper
          v-show="activeNum===1"
          title="权限配置"
        >
          <div class="treeContainer">
            <div v-for="(item,i) in treeList" :key="item.id" class="menu-item">
              <div class="header">{{ item.title }}</div>
              <div class="content">
                <el-tree
                  ref="tree"
                  :data="item.children"
                  show-checkbox
                  default-expand-all
                  node-key="id"
                  :expand-on-click-node="false"
                  highlight-current
                  :props="{label:'title',value:'id'}"
                  :default-checked-keys="formData.perms[i]"
                  @check="getTreeKeys"
                />
              </div>
            </div>
          </div>

        </info-wrapper>
        <info-wrapper v-show="activeNum===2" title="检查并完成">
          <div class="checkBox">
            <el-row>角色名称:{{ formData.roleName }}</el-row>
            <el-row>角色描述:{{ formData.remark }}</el-row>
            <el-row>角色权限:</el-row>
            <div class="treeContainer none">
              <div v-for="(item,i) in treeList" :key="item.id" class="menu-item">
                <div class="header">{{ item.title }}</div>
                <div class="content">
                  <el-tree
                    ref="tree2"
                    :disabled="true"
                    :data="item.children"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    :expand-on-click-node="false"
                    highlight-current
                    :props="defaultProps"
                    :default-checked-keys="formData.perms[i]"
                  />
                </div>
              </div>
            </div>
          </div>
        </info-wrapper>
      </div>

      <template #footer>
        <el-button v-if="activeNum!==0" @click="onPrev">上一步</el-button>
        <el-button v-if="activeNum!==2" type="primary" @click="onNext">下一步</el-button>
        <el-button v-if="activeNum===2" type="primary" @click="onSubmit">确认添加</el-button>
      </template>
    </my-container>
  </div>
</template>

<script>
import MyContainer from '@/components/my-container'
import InfoWrapper from '@/components/info-wrapper.vue'
import { addRoleAPI, getRoleDetailAPI, getTreeListAPI, updateRoleAPI } from '@/api/system'
export default {
  components: {
    MyContainer,
    InfoWrapper
  },
  data() {
    return {
      activeNum: 0,
      stepTile: [
        '角色信息', '权限信息', '检查并完成'
      ],
      treeList: [],
      formData: {
        roleName: '',
        remark: '',
        perms: []
      },
      rules: {
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
      },
      defaultProps: { label: 'title', value: 'id', disabled: this.isdisabledFn }

    }
  },
  async created() {
    this.treeList = await getTreeListAPI()
    const id = this.$route.query.id
    if (id) {
      this.formData = await getRoleDetailAPI(id)
    }
  },
  methods: {
    async onSubmit() {
      if (this.formData.roleId) {
        delete this.formData.userTotal
        await updateRoleAPI(this.formData)
        this.$message.success('编辑成功')
      } else {
        // 调用接口
        await addRoleAPI(this.formData)
        // 提示用户
        this.$message.success('添加成功')
      }
      // 返回
      this.$router.go(-1)
    },
    isdisabledFn() {
      return true
    },
    getCheckedKeys() {
      // 取出每棵树的值赋值给perms
      this.$refs.tree.forEach((item, i) => {
        this.formData.perms[i] = item.getCheckedKeys()
      })
    },
    onPrev() {
      this.activeNum--
    },
    async onNext() {
      // active=1 校验通过才能下一步
      if (this.activeNum === 0) {
        await this.$refs.form.validate()
      }
      // active=2 有数据才能下一步
      if (this.activeNum === 1) {
        if (this.formData.perms.every(item => !item)) {
          this.$message.error('请勾选权限!')
          return
        }
      }
      this.activeNum++
    },
    getTreeKeys() {
      this.$refs.tree.forEach((item, i) => {
        this.formData.perms[i] = item.getCheckedKeys()
      })
    }
  }
}
</script>

<style  lang="scss" scoped>
::v-deep .main{
  padding: 30px!important;
}
.container{
  width: 1000px;
  margin: 0 auto;
}
.treeContainer{
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
}
.stepBox{
  position: absolute;
  top: 100px;
  left: 30px;
}
 .menu-item {
  z-index: 0;
      width: 250px;
      border-right: 1px solid #e4e7ec;
      padding: 20px;
      .header {
        background: #f5f7fa;
        text-align: center;
        padding: 10px 0;
        margin-bottom: 12px;
      }
    }
.checkBox{
  line-height: 40px;
  color: #aaa;
}
.none{
  pointer-events:none;
}
</style>
